<template>
  <div class="water-flow-w">
    <div class="left" ref="left">
      <Component v-for="(cmp, i) in left"
                 class="project-module"
                 :key="i"
                 :item="cmp.moduleData"
                 :is="cmp.moduleName"/>
    </div>
    <div class="right" ref="right">
      <Component v-for="(cmp, i) in right"
                 class="project-module"
                 :key="i"
                 :item="cmp.moduleData"
                 :is="cmp.moduleName"/>
    </div>
  </div>
</template>

<script>
import MainProject from '@/components/cmp/MainProject'

export default {
  name: 'WaterFlow',
  props: ['item'],
  components: {
    MainProject
  },
  data() {
    return {
      left: [],
      right: [],
      renderModules: [],
      rp: 0,
      lp: 0,
    }
  },
  mounted() {
    this.asyncPushElement(this.item.modules)
  },
  methods: {
    // 计算元素的高度
    async calcElementHeight(ref) {
      const _this = this
      return new Promise(resolve => {
        _this.$nextTick(() => {
          resolve(ref.getBoundingClientRect().height)
        })
      })
    },
    // 同步递归 根据真实dom 选择性的push到左右
    async asyncPushElement(arr = []) {
      if (arr.length === 0) return
      console.log(arr)
      const _this = this, item = arr.shift()
      // console.log(_this.lp, '===', _this.rp)
      if (_this.lp > _this.rp) {
        _this.right.push(item)
        _this.rp = await _this.calcElementHeight(_this.$refs.right)
      } else {
        _this.left.push(item)
        _this.lp = await _this.calcElementHeight(_this.$refs.left)
      }
      _this.asyncPushElement(arr)
    }
  },
}
</script>

<style lang="scss" scoped>
.water-flow-w {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: 0 10px;
  align-items: flex-start;
  justify-content: space-around;

  .left, .right {
    display: flex;
    flex-direction: column;
  }
}
</style>